<template>
  <div class="el-menu-vertical-demo">
    <el-row>
      <el-col :span="15">
        <h4 style="text-align: center">掌上食堂管理平台</h4>
        <el-menu
          :default-active="this.$route.path"
          router
          background-color="#304455"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="height: calc(100vh - 40px)"
        >
          <el-menu-item index="/deliver">
            <template slot="title">
              <i class="el-icon-notebook-2"></i>
              <span>配送员管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/business">
            <template slot="title">
              <i class="el-icon-notebook-2"></i>
              <span>商家管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/apply">
            <template slot="title">
              <i class="el-icon-notebook-2"></i>
              <span>入驻审核</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/custom">
            <template slot="title">
              <i class="el-icon-notebook-2"></i>
              <span>用户管理</span>
            </template>
          </el-menu-item>

          <el-menu-item index="/person">
            <template slot="title">
              <i class="el-icon-notebook-2"></i>
              <span>个人信息</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/canteen">
            <i class="el-icon-data-analysis"></i>
            <span slot="title">食堂管理</span>
          </el-menu-item>
          <el-menu-item index="/">
            <i class="el-icon-user"></i>
            <span slot="title">登录</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  methods: {},
};
</script>

<style>
.el-menu-vertical-demo {
  display: flex; /* 使用Flexbox布局 */
  width: 100%;
  /* 移除固定高度，让布局自适应 */
}

.el-menu-vertical-demo .el-col {
  /* 设置列的宽度，而不是高度 */
  width: 200px;
}

h4 {
  background-color: #304455; /* 标题背景颜色 */
  color: #fff; /* 标题文字颜色 */
  margin: 0;
  padding: 20px; /* 确保 padding 与高度相匹配 */
}

/* 设置菜单样式 */
.el-menu-vertical-demo .el-menu {
  width: 100%; /* 菜单宽度 */
  border-right: none; /* 移除右边框 */
  height: calc(100vh - 40px); /* 减去 h5 标题的高度 */
}
</style>
